<template>
	<view class="explore" :style="{ paddingTop: paddingHeight + 'px' }">
		<view class="tabs" :style="{ paddingTop: paddingHeight + 'px' }">
			<u-tabs
				:list="tabs"
				lineWidth="60rpx"
				lineHeight="4rpx"
				lineColor="#1F2434"
				@click="handleClicktab"
				:activeStyle="{
					color: '#1F2434',
					fontWeight: '500',
					fontSize: '28rpx',
					fontFamily: 'PingFangSC-Medium, PingFang SC'
				}"
				:inactiveStyle="{
					color: 'rgba(31,36,52,0.8)',
					fontSize: '26rpx',
					fontFamily: 'PingFangSC-Regular, PingFang SC'
				}"
				itemStyle="padding-left: 40rpx; padding-right: 40rpx; height: 80rpx;"
			>
			</u-tabs>
		</view>
		<view class="container">
			<u-swiper
				indicator
				height="208rpx"
				indicatorMode="line"
				bgColor="transparent"
				keyName="image"
				:indicator="false"
				:list="swiperList"
				@click="clickSwiper"
			></u-swiper>
			<view
				class="explore_l"
				v-for="(item, index) in filterList"
				:key="index"
				@click="navigate(item.path)"
			>
				<u-image
					:showMenuByLongpress="false"
					width="242rpx"
					height="160rpx"
					:src="item.url"
					radius="10"
					:lazy-load="true"
				></u-image>
				<view class="intro">
					<view class="title">
						{{ item.title }}
					</view>
					<view class="con">{{ item.content }} </view>
					<view class="time">{{ item.createTime }}  <text> 浏览{{ item.readCount | readCountFn}}</text></view>
                    <view 
                        v-if="userId"
                        class="read"
                        :class="{'active':item.isRead}"
                    >{{ item.isRead?'已读':'未读' }}</view>
				</view>
			</view>
		</view>
		<drag-button :isDock="true" :existTabBar="true" />
		<tab-bar :current="1"></tab-bar>
	</view>
</template>

<script>
import {
	findArticleByPage,
	findArticleDetail,
	findArticleMenu,
	findSlideshowArticle
} from '@/api/index.js'
import dragButton from '@/components/drag-button/drag-button.vue'
const dayjs = require('@/utils/dayjs.min.js')
export default {
	components: { dragButton },
	data() {
		return {
			paddingHeight: uni.getStorageSync('navbarHeight'),
			userId: uni.getStorageSync('userId'),
			lineBg: 'http://oss.antaimedical.com/images/static/2024/07/6690f74eeb14d0f049f44d51VXAhCNkpzwxK13ab61585da3bf8efb9a10e297974224.png',
			tabs: [],
			filterList: [],
			imgList: [],
			swiperList: [],
            tabId:'',
		}
	},
    filters: {
		readCountFn(val) {
            if(val>=10000){
                return (val/10000).toFixed(1)+'万+'
            }else{
                return val || 0
            }
		}
	},
	mounted() {
	},
    onShow(){
		this.findArticleMenu()
		this.findSlideshowArticle()
    },
	methods: {
		stripHTMLTags(htmlString) {
			return htmlString.replace(/<[^>]*>/g, '')
		},
		// 获取轮播图
		findSlideshowArticle() {
			findSlideshowArticle().then((res) => {
				this.swiperList = res.data.map((v) => {
					return {
						image: v.coverPic,
						id: v.id
					}
				})
			})
		},
		// 获取tab栏
		findArticleMenu() {
			findArticleMenu().then((res) => {
				this.tabs = res.data.map((val) => {
					return {
						name: val.menuName,
						id: val.menuId
					}
				})
				this.findArticleByPage()
			})
		},
		// 获取文章列表
		findArticleByPage() {
			let params = {
				page: 1,
				size: 1000,
				menuId: this.tabId?this.tabId:this.tabs[0].id,
                userId:this.userId
			}
			findArticleByPage(params).then((res) => {
				this.filterList = res.data.list.map((val) => {
					let str = this.stripHTMLTags(val.content).slice(0, 40)
					return {
						title: val.title,
						url: val.coverPic,
						isRead: val.isRead,
						createTime: dayjs(val.createTime).format('YYYY-MM-DD') ,
						content: str,
						readCount: val.readCount,
						path: `/pagesB/knowledge/article?id=${val.id}`
					}
				})
			})
		},
		navigate(url) {
			uni.navigateTo({
				url
			})
		},
		clickSwiper(index) {
			let obj = this.swiperList[index]
			uni.navigateTo({
				url: `/pagesB/knowledge/article?id=${obj.id}`
			})
		},
		handleClicktab(val) {
            this.tabId = val.id
			this.findArticleByPage()
		}
	}
}
</script>
<style lang="scss" scoped>
.explore {
	min-height: 100vh;
}

.tabs {
	// height: 80rpx;
	padding-left: 32rpx;
	border-radius: 16rpx;
	padding-bottom: 20rpx;
	border-bottom: 2rpx solid #f4f4f4;
	position: fixed;
	left: 0;
	top: 0;
	background-color: #fff;
	z-index: 999;
}

.container {
	margin-top: 110rpx;
	padding: 26rpx 48rpx 110rpx;
	width: 100%;

	.explore_l {
		width: 100%;
		margin: 24rpx 0;
		border-radius: 32rpx;
		background-color: #ffffff;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;

		.intro {
			max-width: 410rpx;
			font-family: PingFang SC, PingFang SC;
			font-size: 28rpx;
			color: #1f2434;
			padding: 12rpx 24rpx;
            position: relative;
			.title {
				width: 100%;
				text-align: left;
				font-weight: 500;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.con {
				width: 100%;
				margin-top: 8rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: rgba(31, 36, 52, 0.8);
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.time {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: rgba(31, 36, 52, 0.5);
				text-align: left;
                margin-top: 26rpx;
                text{
                    margin-left: 30rpx;
                }
			}
            .read{
                position: absolute;
                right: 0;
                bottom: 0;
                padding: 6rpx 20rpx;
                border-radius: 36rpx;
                font-size: 24rpx;
                background-color: #FF3E3E;
                color: #fff;
            }
            .read.active{
                background-color: #CACACA;
            }
		}
	}
}
</style>
